<template>
  <div>
    <!-- 选项卡按钮 -->
    <div class="tab-buttons">
      <button v-for="tab in tabs" :key="tab.name" @click="currentTab = tab.component"
        :class="{ 'active': currentTab === tab.component }">
        {{ tab.name }}
      </button>
    </div>

    <!-- 动态组件 -->
    <div class="tab-content">
      <component :is="currentTab" />
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import freezeCom from './components/freezeCom.vue'
import shallowCom from './components/shallowCom.vue'
import formCom from './components/formCom.vue'
import tableCom from './components/tableCom.vue'
import menuCom from './components/menuCom.vue'
import treeCom from './components/treeCom.vue'
import treeFunCom from './components/treeFunCom.vue'

// 使用shallowRef优化性能，避免不必要的深层响应式
const currentTab = shallowRef(shallowCom)

// 所有选项卡配置
const tabs = [
  { name: 'Shallow', component: shallowCom },
  { name: 'Freeze', component: freezeCom },
  { name: 'Form', component: formCom },
  { name: 'Table', component: tableCom },
  { name: 'Menu', component: menuCom },
  { name: 'Tree', component: treeCom },
  { name: 'Tree Fun', component: treeFunCom },
]
</script>

<style scoped>
.tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-buttons button {
  padding: 8px 16px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-buttons button:hover {
  background: #e0e0e0;
}

.tab-buttons button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.tab-content {
  border: 1px solid #eee;
  padding: 16px;
  border-radius: 4px;
}
</style>